<template>
  <div id="SupportDetailsList">
    <Header
      :currentCity="currentCity"
      :cityList="cityList"
      :phone="phone"
      @closeChange="subscribeCar"
    ></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="SupportDetailsList_wrap">
      <div class="SupportDetailsList_wrap_tabs">
        <div class="navAcitive">
          <ul>
            <li
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ activeNameTipe: activeCode == index }"
            >
              <a :href="prefixUrl + item.href">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div>
          <div id="tabNameAll">
            <div class="EstateIndex">
              <div class="EstateIndex_wrap">
                <div class="EstateIndex1_Left">
                  <div id="sc1" class="swiper-container">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide" v-for="(item, indx) in swiperData" :key="indx">
                        <a :href="prefixUrl + XiangceHref" target="_blank">
                          <img
                            :src="item.url"
                            class="img1 cursor"
                            style="width: 100%"
                            :title="HouseDetail.name + item.typeName"
                            :alt="HouseDetail.name + item.typeName"
                          />
                        </a>
                      </div>
                    </div>
                    <div class="swiper-button-prev" slot="button-prev"></div>
                    <div class="swiper-button-next" slot="button-next"></div>
                  </div>

                  <div class="swiper-AbbreviationImg">
                    <ul>
                      <li
                        class="cursor"
                        v-for="(item, index) in AbbreviationImg"
                        :key="index"
                        :class="
                            index == AbbreviationImgClass ? 'AbbrImgClass' : ''
                          "
                        @click="AbbrImgList(index, item.current)"
                      >
                        <p>{{ item.typeName }}({{ item.count }})</p>
                        <img :src="item.houseInfoImgs[0].url" :title="item.houseInfoImgs[0].url" />
                      </li>
                    </ul>
                  </div>
                  <!-- 轮播缩略图 -->
                </div>
                <div class="EstateIndex1_right">
                  <h3 style="font-size: 30px; color: #333333">{{ HouseDetail.name }}</h3>
                  <p class="EstateIndex1_right_p1">
                    <span
                      v-html="
                          HouseDetail.saleStatus == '1'
                            ? '在售'
                            : HouseDetail.saleStatus == '2'
                            ? '售罄'
                            : '待售'
                        "
                    >{{ HouseDetail.saleStatus }}</span>
                    <span>{{ HouseDetail.estateTypeName }}</span>
                    <span>{{ HouseDetail.lab1 }}</span>
                    <span>{{ HouseDetail.lab2 }}</span>
                    <span>{{ HouseDetail.lab3 }}</span>
                  </p>
                  <p class="EstateIndex1_right_p2">
                    价格
                    <span class="marginLeft20" v-if="HouseDetail.meterPrice">
                      <b style="color: #ef524d; font-size: 30px">
                        {{
                        HouseDetail.meterPrice
                        }}
                      </b>
                      <span style="color: #000">
                        元/㎡
                        <el-tooltip class="item cursor" effect="dark" placement="bottom">
                          <div slot="content">
                            受市场影响，价格会产
                            <br />生波动性，具体价格和楼
                            <br />盘其他信息实际以售楼
                            <br />处展示为准
                          </div>
                          <i class="icon el-icon-question"></i>
                        </el-tooltip>
                      </span>
                    </span>
                    <span
                      class="marginLeft20"
                      style="color: #ef524d; margin-right: 10px font-size:16px"
                      v-else
                    >待定</span>
                    <span
                      class="cursor"
                      @click="
                          clickType = 1;
                          subscribe(
                            '订阅变价通知',
                            '涨价降价及时了解，买房时机不错过！',
                            'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211115/7f6392c44cd6446aa6de3c274f15e75a.png',
                            '订阅成功'
                          );
                        "
                    >
                      <img src="/images/bianjia.png" title="/images/bianjia.png" alt />
                      <span style="color: #ff9800">变价通知我</span>
                    </span>
                  </p>
                  <h4 v-if="HouseDetail.houseType == 2">
                    <span
                      class="cursor"
                      @click="
                          clickType = 8;
                          subscribe(
                            '咨询返现详情',
                            '专业楼盘管家，深度解答！',
                            'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211111/ec7c2095870d43459e3713b406281806.png',
                            '订阅成功'
                          );
                        "
                    >预计返现？万元</span>
                    <b class="cursor">
                      <el-tooltip class="item cursor" effect="dark" placement="bottom">
                        <div slot="content">
                          该"返现"金额为参
                          <br />考金额,可能存在误
                          <br />差,实际金额请询问
                          <br />本站工作人员
                        </div>
                        <img src="/images/wen.png" title="/images/wen.png" alt />
                      </el-tooltip>
                    </b>
                  </h4>
                  <p class="EstateIndex1_right_p3">
                    开盘
                    <span
                      class="marginLeft20"
                      style="font-size: 16px; color: #333333"
                      v-html="
                          HouseDetail.openDate ? HouseDetail.openDate : '暂无'
                        "
                    ></span>
                    <b>
                      <i class="icon el-icon-view"></i>
                      <span
                        class="cursor"
                        style="color: #ff9800"
                        @click="
                            clickType = 2;
                            subscribe(
                              '订阅开盘通知',
                              '开盘时间及时了解，买房时机不错过！',
                              'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211111/7af66892335440a2bdae3352903a5ef8.png',
                              '订阅成功'
                            );
                          "
                      >关注下次开盘时间</span>
                    </b>
                  </p>
                  <p class="EstateIndex1_right_p4">
                    交房
                    <span
                      class="marginLeft20"
                      style="font-size: 16px; color: #333333"
                      v-if="HouseDetail.handedDate"
                    >{{ HouseDetail.handedDate }}</span>
                    <span class="marginLeft20" style="font-size: 16px; color: #ef524d" v-else>待定</span>
                  </p>
                  <p class="EstateIndex1_right_p5">
                    户型
                    <span
                      class="marginLeft20"
                      style="font-size: 16px; color: #333333"
                      v-html="
                          HouseDetail.mainRoom
                            ? `${HouseDetail.mainRoom.split(',')[0]}...` ||
                              '暂无'
                            : '暂无'
                        "
                    ></span>
                    <b>
                      <span class="cursor">
                        <a :href="prefixUrl + ToHUxingAllCode">
                          <i class="icon el-icon-office-building"></i>
                          <span style="text-decoration: underline; color: #000">全部户型</span>
                        </a>
                      </span>
                    </b>
                  </p>
                  <p class="EstateIndex1_right_p6">
                    地址
                    <span
                      class="marginLeft20"
                      style="font-size: 16px; color: #333333"
                      v-html="HouseDetail.address ? HouseDetail.address : '暂无'"
                    >{{ HouseDetail.address }}</span>
                    <span class="cursor">
                      <a :href="prefixUrl + ToDiTuAllCode" style="color: #000">
                        <i class="icon el-icon-location-information"></i>
                        <span
                          class="EstateIndex1_right_p6_decoration"
                          style="text-decoration: black; color: #000"
                        >查看地图</span>
                      </a>
                    </span>
                  </p>
                  <div class="notice-row">
                    <p class="EstateIndex1_right_p7 cursor">
                      <span @click="centerDialogVisible = true">
                        <i class="icon el-icon-warning-outline"></i>
                        <span style="color: #ff9800">✖✖✖✖✖✖✖✖✖✖用户风险提示</span>
                      </span>
                    </p>
                    <el-button style="font-weight: bold; font-size: 16px">
                      <a :href="`${prefixUrl}/lpcx/`" target="_blank">查看更多楼盘 &nbsp;></a>
                    </el-button>
                  </div>

                  <!-- 楼盘优惠 -->
                  <div
                    class="loupanyy youhuihuodong"
                    v-if="activityVisible && houseActivityList[0].status > 0"
                  >
                    <div>
                      <h5>免费领取楼盘优惠</h5>
                      <p>详细优惠将由楼盘管家为您说明</p>
                    </div>
                    <div>
                      <p>
                        <span>{{ houseActivityList[0].pNum }}</span>人已领取
                      </p>
                      <p>剩余{{ houseActivityList[0].dayNum }}天可领取</p>
                    </div>
                    <div>
                      <button
                        @click="
                            clickType = 12;
                            subscribe(
                              '线上优惠',
                              '您将报名领取线上渠道专项优惠券',
                              'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211111/ec7c2095870d43459e3713b406281806.png',
                              '报名成功',
                              1,
                              'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211202/e1b3f365a69b45b6aecf70074fba45b7.png'
                            );
                          "
                      >立即领取</button>
                    </div>
                  </div>

                  <!-- 专车预约 -->
                  <div
                    class="loupanzhuancar youhuihuodong"
                    v-if="activityVisible && houseActivityList[1].status > 0"
                  >
                    <div>
                      <h5>免费专车 专属座驾</h5>
                      <p>随时看房 免费往返接送</p>
                    </div>
                    <div>
                      <p>
                        <span>{{ houseActivityList[1].pNum }}</span>人已领取
                      </p>
                      <p>剩余{{ houseActivityList[1].dayNum }}天可领取</p>
                    </div>
                    <div>
                      <button
                        @click="
                            clickType = 12;
                            subscribe(
                              '线上优惠',
                              '您将报名领取线上渠道专项优惠券',
                              'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211111/ec7c2095870d43459e3713b406281806.png',
                              '报名成功',
                              1,
                              'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211202/35529588255344e28e9f6fda81be8b23.png'
                            );
                          "
                      >立即报名</button>
                    </div>
                  </div>

                  <div class="mini-program">
                    <div class="lab">号码加密拨打，放心了解详情</div>
                    <div class="tel">
                      {{ HouseDetail.keyNavigationStart }}
                      <span
                        v-if="HouseDetail.keyNavigationEnd"
                      >转</span>
                      {{ HouseDetail.keyNavigationEnd }}3
                    </div>
                    <div class="img">
                      <img
                        :src="HouseDetail.miniQcCode"
                        :alt="HouseDetail.name"
                        :title="HouseDetail.name"
                      />
                      <span>扫码拨号</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="EstateIndex_HouseType" v-if="this.HouseRoomList_index.length !== 0">
              <h4>楼盘户型</h4>
              <div class="EstateIndex_HouseType_wrap">
                <ul>
                  <li
                    class="EstateIndex_HouseType_li pic cursor"
                    v-for="(item, index) in HouseRoomList_index"
                    :key="index"
                  >
                    <img
                      :src="item.imgUrl"
                      :title="HouseDetail.name + `楼盘户型图`"
                      :alt="HouseDetail.name + `楼盘户型图`"
                    />
                    <a :href="prefixUrl + item.href" target="_blank">
                      <p class="EstateIndex_HouseType_p1">
                        <span>{{ item.roomTypeName }}</span>
                        <span>{{ item.roomName }}</span>
                        <span
                          v-html="item.saleStatus == 1 ? '在售' : item.saleStatus == 2 ? '售罄' : '未售'"
                        >{{ item.saleStatus }}</span>
                      </p>
                      <p class="EstateIndex_HouseType_p2">
                        <b
                          style="color: #ef524d; margin-right: 10px font-size:16px"
                          v-if="item.totalPriceMax"
                        >约{{ item.totalPriceMax }}万</b>
                        <b style="color: #ef524d; margin-right: 10px font-size:16px" v-else>价格待定</b>
                        <span v-if="item.area">建筑面积约{{ item.area }}㎡</span>
                      </p>
                      <p class="EstateIndex_HouseType_p2" v-if="item.retAmtMax">
                        <b
                          style="color: #ef524d; margin-right: 10px font-size:16px"
                        >预计最高返现：约{{ item.retAmtMax }}万</b>
                      </p>
                      <p class="EstateIndex_HouseType_p3">
                        <span v-for="(ites, indexs) in item.tagCode" :key="indexs">{{ ites }}</span>
                      </p>
                    </a>
                    <div class="EstateIndex_HouseType_button">
                      <el-button
                        @click="
                            clickType = 8;
                            subscribe(
                              '咨询返现详情',
                              '专业楼盘管家，深度解答！',
                              'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211111/ec7c2095870d43459e3713b406281806.png',
                              '订阅成功'
                            );
                          "
                      >了解户型返现</el-button>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="EstateIndexDynamic">
              <h4>实时动态</h4>
              <div class="EstateIndexDynamic_div1">
                <ul class="EstateIndexDynamic_div1_ul">
                  <li
                    class="EstateIndexDynamic_Li floatLeft"
                    v-for="(item, index) in HouseDynamicList"
                    :key="index"
                  >
                    <div class="EstateIndexDynamic_Li_p2">
                      <p></p>
                      <p></p>
                    </div>
                    <div class="EstateIndexDynamic_Li_p3">
                      <h4>
                        {{ item.dycTitle }}
                        <span style="font-size: 14px; color: #999999">
                          {{
                          item.dycTime
                          }}
                        </span>
                      </h4>
                      <p style="margin: 20px 0">{{ item.content }}</p>
                    </div>
                  </li>
                </ul>
                <div class="floatRight_qrCode">
                  <div>
                    <canvas id="canvas" class="yzq">二维码位置</canvas>
                  </div>
                </div>
              </div>
              <div class="EstateIndexDynamic_dingyue">
                <li>
                  <img src="/images/loupandingyue.png" title="/images/loupandingyue.png" alt srcset />
                </li>
                <li>
                  <h5>订阅楼盘信息</h5>
                  <p>担心错过开盘？立即订阅，楼盘一手情报抢先知道</p>
                </li>
                <li>
                  <el-input placeholder="请输入您的手机号" maxlength="11" v-model="phone"></el-input>
                  <el-button
                    type="primary"
                    @click="
                        clickType = 4;
                        subscribe(
                          '楼盘动态',
                          undefined,
                          'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211111/ec7c2095870d43459e3713b406281806.png',
                          '订阅成功'
                        );
                      "
                  >立即订阅</el-button>
                </li>
              </div>
              <div class="EstateIndexDynamic_lpdt">
                <div>
                  <h5 v-if="total_code == 0">当前暂无动态</h5>

                  <el-button type="primary" v-if="total_code > 5">
                    <a :href="prefixUrl + dynamicAllCode">查看全部{{ total_code }}个动态</a>
                  </el-button>
                </div>
              </div>
            </div>
            <div class="EstateIndex_map">
              <h4 style="font-size: 24px; color: #333333">位置周边</h4>
              <div class="BmapTipe">
                <div id="container"></div>
                <div id="resultData">
                  <div class="facilMatch">
                    <ul>
                      <li
                        v-for="(item, index) in peitaoTabData"
                        :key="index"
                        @click="handleSelect(index,item.name)"
                      >
                        <img :src="index==peitaoTabIndex?item.iconActive:item.icon" />
                        <span>{{item.name}}</span>
                      </li>
                    </ul>
                  </div>
                  <p>附近{{resultsList.length}}个{{this.MapDetection_Code}}</p>
                  <div class="matchData">
                    <ul v-if="resultsList.length != 0">
                      <li v-for="(item, index) in resultsList" :key="index">
                        <div class="MoreData_right cursor" @click="getPoint(item)">
                          <span>{{index+1}}、</span>
                          <span>{{ item.title }}</span>
                          <p>{{addressData}}:{{ item.address }}</p>
                        </div>
                      </li>
                    </ul>
                    <ul v-else>暂无数据</ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="trend" style="margin:20px 0">
              <h4 style="font-size: 24px; color: #333333">房价走势</h4>
              <div id="TransactionCurve">
                <div class="prite">价格说明：暂无说明</div>
                <div id="lineAxis"></div>
              </div>
            </div>
            <!-- 楼盘问答 -->
            <div class="houseindex-problem">
              <!-- 评论 -->
              <div class="house-problem_comment">
                <h4>
                  用户点评
                  <span class="cursor">
                    <a :href="prefixUrl + `/lpxqdp/${estateId}.html`">查看更多 ></a>
                  </span>
                </h4>
                <div class="house-problem_QA_son">
                  <ul class="house-problem_DP_son_content" v-if="commentList.length!=0">
                    <li class="cursor" v-for="(item, index) in commentList" :key="index">
                      <a :href="prefixUrl + `/lpxqdp/${estateId}.html?id=${item.id}`">
                        <div>
                          <div>
                            <img :src="item.userImg" alt />
                            {{item.userName}}
                          </div>
                          <p>{{ item.content }}</p>
                        </div>
                        <div>
                          <p>{{item.datetime}}</p>
                        </div>
                      </a>
                    </li>
                  </ul>
                  <ul class="house-problem_DP_son_content" v-else>
                    <li>
                      <h4>暂无数据</h4>
                    </li>
                  </ul>
                  <div class="house-problem_QA_son_button">
                    <el-button type="primary" plain>
                      <a :href="prefixUrl + `/lpxqwydp/${estateId}.html`">我要点评</a>
                    </el-button>
                  </div>
                </div>
              </div>
              <!-- 问答 -->
              <div class="house-problem_QA">
                <h4>
                  你问我答
                  <span class="cursor">
                    <a :href="prefixUrl + `/lpxqwd/${estateId}.html`">查看更多 ></a>
                  </span>
                </h4>
                <div class="house-problem_QA_son">
                  <ul class="house-problem_QA_son_content" v-if="configureList.length!=0">
                    <li class="cursor" v-for="(item, index) in configureList" :key="index">
                      <a :href="prefixUrl + `/lpxqwdxq/${estateId}.html?id=${item.id}`">
                        <p>
                          <b>问</b>
                          {{HouseDetail.name}}{{ item.content }}
                          <span>{{ item.aNum }}个回答</span>
                        </p>
                        <p class="house-problem_QA_son_contentType">{{ item.aContent }}</p>
                      </a>
                    </li>
                  </ul>
                  <ul class="house-problem_QA_son_content" v-else>
                    <li>
                      <h4>暂无数据</h4>
                    </li>
                  </ul>
                  <div class="house-problem_QA_son_button">
                    <el-button
                      type="primary"
                      @click="
                          loginType = 'problem';
                          popupproblem.show = true;
                        "
                      plain
                    >我要提问</el-button>
                  </div>
                </div>
              </div>
              <!-- 问答 -->
            </div>
            <!-- 热门榜单 -->
            <div class="EstateIndex_hot">
              <li class="display" v-if="topList">
                <h4>热门榜单</h4>
                <div class="tab_wrap">
                  <span :class="rankingType == 1 ? 'active' : ''" @click="rankingType = 1">人气榜单</span>
                  <span :class="rankingType == 2 ? 'active' : ''" @click="rankingType = 2">热搜榜单</span>
                  <span :class="rankingType == 3 ? 'active' : ''" @click="rankingType = 3">热销榜单</span>
                </div>
              </li>
              <div class="EstateIndex_hotHose display">
                <!-- 人气榜单 -->
                <div
                  class="rank_wrap clearfix"
                  :style="{ display: rankingType == 1 ? 'block' : 'none' }"
                >
                  <a
                    v-for="(item, index) in topList.rqList"
                    :key="index"
                    :href="`${prefixUrl}/lpxq/${item.estateId}.html`"
                    target="_blank"
                    class="rank_box"
                  >
                    <div class="pic">
                      <el-image
                        :src="item.url"
                        class="lazy-timeout-click"
                        :title="item.name"
                        :alt="item.name"
                        lazy
                      ></el-image>
                      <div class="build_label">{{ index == 0 ? "榜首" : `TOP${index + 1}` }}</div>
                    </div>
                    <div class="rank_name">{{ item.shortRegionName }}-{{ item.name }}</div>
                    <div class="rank_info clearfix has-hint-icon">
                      <div class="rank_info_L">
                        建面 :
                        {{
                        item.area && item.areaMax
                        ? `${item.area}-${item.areaMax}㎡`
                        : "待定"
                        }}
                      </div>
                      <div class="rank_info_R">
                        {{
                        item.meterPrice
                        ? `${item.meterPrice}元/m²`
                        : "售价待定"
                        }}
                      </div>
                    </div>
                  </a>
                </div>
                <!-- 热搜榜单 -->
                <div
                  class="rank_wrap clearfix"
                  :style="{ display: rankingType == 2 ? 'block' : 'none' }"
                >
                  <a
                    v-for="(item, index) in topList.ryList"
                    :key="index"
                    :href="`${prefixUrl}/lpxq/${item.estateId}.html`"
                    target="_blank"
                    class="rank_box"
                  >
                    <div class="pic">
                      <el-image
                        :src="item.url"
                        class="lazy-timeout-click"
                        :title="item.name"
                        :alt="item.name"
                      ></el-image>
                      <div class="build_label">{{ index == 0 ? "榜首" : `TOP${index + 1}` }}</div>
                    </div>
                    <div class="rank_name">{{ item.shortRegionName }}-{{ item.name }}</div>
                    <div class="rank_info clearfix has-hint-icon">
                      <div class="rank_info_L">
                        建面 :
                        {{
                        item.area && item.areaMax
                        ? `${item.area}-${item.areaMax}㎡`
                        : "待定"
                        }}
                      </div>
                      <div class="rank_info_R">
                        {{
                        item.meterPrice
                        ? `${item.meterPrice}元/m²`
                        : "售价待定"
                        }}
                      </div>
                    </div>
                  </a>
                </div>
                <!-- 热销榜单 -->
                <div
                  class="rank_wrap clearfix"
                  :style="{ display: rankingType == 3 ? 'block' : 'none' }"
                >
                  <a
                    v-for="(item, index) in topList.xsList"
                    :key="index"
                    :href="`${prefixUrl}/lpxq/${item.estateId}.html`"
                    target="_blank"
                    class="rank_box"
                  >
                    <div class="pic">
                      <el-image
                        :src="item.url"
                        class="lazy-timeout-click"
                        :title="item.name"
                        :alt="item.name"
                      ></el-image>
                      <div class="build_label">{{ index == 0 ? "榜首" : `TOP${index + 1}` }}</div>
                    </div>
                    <div class="rank_name">{{ item.shortRegionName }}-{{ item.name }}</div>
                    <div class="rank_info clearfix has-hint-icon">
                      <div class="rank_info_L">
                        建面 :
                        {{
                        item.area && item.areaMax
                        ? `${item.area}-${item.areaMax}㎡`
                        : "待定"
                        }}
                      </div>
                      <div class="rank_info_R">
                        {{
                        item.meterPrice
                        ? `${item.meterPrice}元/m²`
                        : "售价待定"
                        }}
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
            <!-- 猜你喜欢 -->
            <div class="row row-v52 margin_bottom30 clearfix">
              <div class="box2 box-inter-52 has-marginTop box-inter" v-if="HouseHomePage">
                <div class="hd">
                  <h2>猜你喜欢</h2>
                </div>
                <div class="bd">
                  <likeList :listData="HouseHomePage" :jump="`${prefixUrl}/lpxq`"></likeList>
                </div>
              </div>
            </div>
            <!-- 关键区域，街道，周边 -->
            <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
          </div>
        </div>
      </div>
      <!-- 重要风险提示 -->
      <el-dialog
        title="重要风险提示"
        :visible.sync="centerDialogVisible"
        width="500px"
        class="centerDialog_type"
        center
      >
        <div class="centerDialog_list">
          <p>✖✖✖✖✖✖✖✖✖✖旨在为广大用户提供更丰富的信息，但由于部分信息由第三方提供，部分信息通过技术手段生成，我们持续通过技术和管理手段提升信息的准确度，但我们无法确保信息的真实性、准确性和完整性。房产交易滋事体大，✖✖✖✖✖✖✖✖✖✖上的信息不应作为您交易决策的依据，您决策前应与房地产开发商核实相关信息、并亲自到房屋中核验信息，或以产权证明、政府类网站发布的官方信息为准。✖✖✖✖✖✖✖✖✖✖不对您交易过程中对本网站信息产生的依赖承担任何明示或默示的担保责任或其他任何责任。</p>
          <h3>请您详细阅读如下声明：</h3>
          <h4>1. 关于参考户型图</h4>
          <p>✖✖✖✖✖✖✖✖✖✖呈现的户型图为第三方提供的非标准的参考户型图或根据第三方提供的户型图通过系统/技术等手段生成的非标准的参考户型图，其中户型结构及房屋面积并非按国家标准进行的测绘专业活动取得。因为各种原因，参考户型图与真实现状一定存在差异，我们无法保障户型图准确性和差异率，户型图仅供参考，不应作为您交易的决策依据，房屋面积的准确信息请您与开发商/产权方核实，并请以产权证明或您委托的专业机构测量结果为准。</p>
          <h4>2. 关于房屋装修情况</h4>
          <p>✖✖✖✖✖✖✖✖✖✖房源图片、效果图、视频等呈现出的房屋装修情况可能因为拍摄时间、拍摄角度等原因和实际场景存在出入，仅供参考，不应作为您交易的决策依据，请以您在看房时房源的实际情况为准。样板间与实际交付标准可能不一致，请您审慎评估决断。</p>
          <h4>3. 关于房屋情况</h4>
          <p>✖✖✖✖✖✖✖✖✖✖展示的房源信息（包括但不限于房屋面积、所在楼栋、房屋用途、开盘时间等）由开发商或其他第三方提供，仅供参考不应作为您交易的决策依据，房源的准确信息请您与开发商核实，并以房本信息、房屋实际情况、您签订房屋交易合同中披露的信息为准。</p>
          <h4>4. 关于房屋周边配套等</h4>
          <p>房源介绍中的周边配套、在建设施、规划设施、地铁信息、绿化率、得房率等内容均系开发商等第三方提供，仅供参考，不应作为您交易的决策依据，房屋周边配套请您与开发商及主管部门核实，并以房本信息、房屋实际情况、您签订房屋交易合同中披露的信息为准。</p>
          <h4>5. 关于距离</h4>
          <p>房源介绍中与距离相关的数据均来源于百度地图。</p>
        </div>
      </el-dialog>
    </div>
    <Footer :currentCity="currentCity"></Footer>
    <!-- 弹窗按钮订阅 -->
    <PopupForm
      :show="popupform.show"
      :title="popupform.title"
      :desc="popupform.desc"
      :cover="popupform.cover"
      :phone="popupform.phone"
      :smsState="popupform.smsState"
      :customTheme="popupform.customTheme"
      :background="popupform.background"
      :contentClass="popupform.contentClass"
      @phoneChange="phoneChange"
      @confirm="returnVisit"
      @cancel="
        popupform.show = false;
        popupform.background = '';
      "
    ></PopupForm>
    <!-- 订阅回调弹窗 -->
    <PopupSuccess
      :show="popupsubscribe.show"
      :cover="popupsubscribe.cover"
      :title="popupsubscribe.title"
      :desc="popupsubscribe.desc"
      @cancel="
        popupsubscribe.show = false;
        subscribeDisabled = false;
      "
    ></PopupSuccess>

    <!-- 楼盘提问弹窗 -->
    <!-- 提交问题 -->
    <PopupProblem
      :show="popupproblem.show"
      :title="popupproblem.title"
      :content="popupproblem.content"
      :textareaValue="popupproblem.textareaValue"
      :placeholder="popupproblem.placeholder"
      :confirmText="popupproblem.confirmText"
      :disabled="popupproblem.disabled"
      @close="popupproblem.show = false"
      @confirm="popupproblemConfirm"
    ></PopupProblem>
    <!-- 弹窗 -->
    <PopupProblemSuccess
      :show="popup.show"
      :cover="popup.cover"
      :title="popup.title"
      :desc="popup.desc"
      :confirmText="popup.confirmText"
      @confirm="
        popup.show = false;
        popupproblem.disabled = false;
      "
    ></PopupProblemSuccess>
  </div>
</template>

<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=QD1alOi5Col7B5UU8ad6twt4tU2MEFRi"></script>
<script>
var head = {
  title: '成都✖✖✖✖✖✖✖✖✖✖', // 网页包头
  content: '成都✖✖✖✖✖✖✖✖✖✖', // 网页描述
  keywords: '成都,买房,管家,楼盘,买房网,✖✖✖✖✖✖✖✖✖✖', // 网页关键词
}
import axios from 'axios'
import likeList from '@/components/like-list'
import u from '~/plugins/Ccom'
import QRCode from 'qrcode'
import * as echarts from 'echarts'
export default {
  components: {
    likeList,
  },
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [
        { rel: 'stylesheet', href: `/css/lpgk.css?v=${new Date().getTime()}` },
      ],
    }
  },
  data() {
    return {
      activeCode: 0,
      activeInd_Map: '地铁',
      radio: 1,
      openHome: '',
      contacInfor: '',
      sexRadio: '女士',
      houseViewingDate: '',
      phone: '',
      title: '标题',
      subscribeDisabled: false,
      SubscriptionSuessTipe: false,
      popupTitle: '提交成功',
      popupDesc:
        '您已成功预约，稍后楼盘管家将联系您了解需求，为您定制专属置业报告。',
      show: true, //显示标签
      scroll: true, //地图缩放
      dragging: true, //地图拖拽
      HouseDynamicList: [], //
      HouseRoomListCode: '全部',
      HouseRoomListIndex: 0,
      // 地图检测
      MapDetection_Code: '地铁',
      container_peitao_list: 'container',
      centerDialogVisible: false,
      userInfo: '',
      SubscriptionSuess: false, //订阅成功
      addVisitRecord: '/api/v1/app/visitRecord/addVisitRecord', //添加回访记录
      mySwiper1: null,
      AbbreviationImgList: [],
      resultsList: [],
      swiper_code: 0,
      peitaoTabIndex: 0,
      peitaoTabData: [
        {
          name: '地铁',
          icon: '/images/train.png',
          iconActive: '/images/trainSelect.png',
        },
        {
          name: '公交',
          icon: '/images/transit.png',
          iconActive: '/images/transitSelect.png',
        },
        {
          name: '火车站',
          icon: '/images/metro.png',
          iconActive: '/images/metroSelect.png',
        },
        {
          name: '学校',
          icon: '/images/school.png',
          iconActive: '/images/schoolSelect.png',
        },
        {
          name: '医院',
          icon: '/images/hospital.png',
          iconActive: '/images/hospitalSelect.png',
        },
        {
          name: '公园',
          icon: '/images/park.png',
          iconActive: '/images/parkSelect.png',
        },
        {
          name: '购物中心',
          icon: '/images/shop.png',
          iconActive: '/images/shopSelect.png',
        },
      ],
      //组件订阅弹窗
      popupsubscribe: {
        show: false, //订阅数据
      },
      customTheme: 0,
      contentClass: '',
      popupform: {
        show: false, //订阅成功数据
        phone: '',
      },
      clickType: '', // 1变价提醒2开盘提醒3咨询剩余房源4订阅楼盘动态5收藏楼盘6户型分析7电话咨询（询购房资格）8询返现9专车看房10咨询返现详情11咨询房贷首付
      subscribeDisabled: false,
      // 楼盘问答弹窗
      popup: {
        show: false,
        cover:
          'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20210907/8b2e500aa48e4a29abbc68cd53059a7f.png',
        title: '提交成功',
        desc: '您的问题已提交后台审核',
        confirmText: '确认',
      },
      map: null,
      addressData: '地址',
    }
  },
  validate(ctx) {
    return /(.*?)\.html/.test(ctx.params.id)
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl
    var currentCity = ctx.currentCity
    var cityList = ctx.cityList
    var HouseDetail = []
    var swiperData = [] //相册
    var HouseDynamicList = []
    var HouseRoomList = []
    var HouseRoomList_index = []
    var HouseHomePage = []
    var topList = []
    var total_code = ''
    var crumbListData = []
    var rankingType = 1 // 人气榜单 热搜榜单 热销榜单
    var AbbreviationImg = [] //缩略相册图片集
    var AbbreviationImgClass = 0 //缩略相册图片集active
    var problemList = [] //楼盘问答
    var centerBaiDu = {
      lng: 0,
      lat: 0,
    }
    var zoom = 15 //缩放级别
    var tabName = ctx.params.id.split('-')
      ? ctx.params.id.split('-')[0].indexOf('.') == -1
        ? ctx.params.id.split('-')[0]
        : ''
      : ''
    var estateId = ctx.params.id.split('.')
      ? ctx.params.id.split('.')[0].split('-').pop()
      : ''
    var tabList = [
      {
        name: '楼盘首页',
        href: `/lpxq/${estateId}.html`,
        aliases: '',
      },
      {
        name: '基础信息',
        href: `/lpxqxx/${estateId}.html`,
        aliases: 'xiangqing',
      },
      {
        name: '楼盘相册',
        href: `/lpxqxc/${estateId}.html`,
        aliases: 'xiangce',
      },
      {
        name: '楼盘户型',
        href: `/lpxqhx/${estateId}.html`,
        aliases: 'lphx',
      },
      {
        name: '实时动态',
        href: `/lpxqdt/${estateId}.html`,
        aliases: 'lpdt',
      },
      {
        name: '周边配套',
        href: `/lpxqpt/${estateId}.html`,
        aliases: 'peitao',
      },
      {
        name: '房价走势',
        href: `/lpxqzs/${estateId}.html`,
      },
      {
        name: '你问我答',
        href: `/lpxqwd/${estateId}.html`,
        aliases: 'wenda',
      },
      {
        name: '免费专车',
        href: `/mfzc/${estateId}.html`,
        aliases: 'mfzc',
      },
    ]
    var XiangceHref = `/lpxqxc/${estateId}.html`
    var imageUrl = `https://xf.pulizu.com/wxminiapp/?id=${estateId}`
    var cityCode = ctx.currentCity.cityCode || ''
    var ToDiTuAllCode = `/lpxqpt/${estateId}.html`
    var ToHUxingAllCode = `/lpxqhx/${estateId} .html`
    var dynamicAllCode = `/lpxqdt/${estateId}.html`
    var houseActivityList = []
    var commentList = [] //楼盘点评
    var activityVisible = true
    // 202202151509 房价走势
    var estateDataName = ''
    var cityDataName = ''
    var regionDataName = ''
    var estateDataList = []
    var cityDataList = []
    var regionDataList = []
    var configureList = []

    // 获取楼盘详情
    var getMetro = await u.http({
      url: '/pc/houseDetail/queryHouseInfoDetailById',
      params: {
        estateId: estateId, //楼盘ID
        userId: '', //用户ID
      },
    })
    if (getMetro.code == 200) {
      let lenNum = 1
      var HouseImgList = []
      HouseDetail = getMetro.data.houseInfoDetail
      // 修改栏目信息
      crumbListData = [
        {
          title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
          href: prefixUrl,
        },
      ]
      // 202111261851 sry 合并路径
      var regionA = [HouseDetail.regionAliases]
      var streetA = [HouseDetail.streetAliases]
      var nowCrumbHref = u.emptyArrayIsNull(regionA.concat(streetA))
      // 区域 街道
      var nowCrumbArr = [
        {
          name: `${HouseDetail.regionName}楼盘` || '',
          aliases: `${prefixUrl}/lpcx/${HouseDetail.regionAliases}` || '',
        },
        {
          name: `${HouseDetail.streetName}楼盘` || '',
          aliases: `${prefixUrl}/lpcx/${nowCrumbHref.join('-')}` || '',
        },
        {
          name: HouseDetail.name,
          aliases: prefixUrl + ctx.route.path,
        },
      ]
      nowCrumbArr.forEach((item) => {
        if (item.aliases) {
          crumbListData.push({
            title: item.name,
            href: item.aliases,
          })
        }
      })
      // 202111231615 sry
      HouseDetail.keyNavigationStart = HouseDetail.keyNavigation
        ? HouseDetail.keyNavigation.split(',')[0] || ''
        : ''
      HouseDetail.keyNavigationEnd = HouseDetail.keyNavigation
        ? HouseDetail.keyNavigation.split(',')[1] || ''
        : ''
      getMetro.data.imgList.forEach((item) => {
        if (item.count != 0) {
          HouseImgList.push(item)
        }
      })
      HouseImgList.forEach((item, index) => {
        item.houseInfoImgs.forEach((ites) => {
          ites.typeName = item.typeName
          swiperData.push({
            url: ites.url,
            remark: ites.remark,
            typeName: item.typeName,
          })
        })
        if (item.count !== 0) {
          item.current = lenNum
          lenNum += item.count
          AbbreviationImg.push(item)
        }
      })
      centerBaiDu.lat = HouseDetail.latitude
      centerBaiDu.lng = HouseDetail.longitude
      head.title = `${HouseDetail.name}开盘资讯、房价走势、实时动态-✖✖✖✖✖✖✖✖✖✖`
      head.content = `✖✖✖✖✖✖✖✖✖✖为您提供${currentCity.cityName}${HouseDetail.name}楼盘详情信息，${HouseDetail.name}房价走势，${HouseDetail.name}户型图，${HouseDetail.name}周边配套，了解更多该楼盘信息，就上✖✖✖✖✖✖✖✖✖✖。`
      head.keywords = `${HouseDetail.name}`
    } else {
      // 202111091818 sry
      return ctx.redirect('/error.html')
    }

    // 楼盘实时动态
    var ByEstateId = await u.http({
      url: '/app/houseDynamic/queryHouseDynamicByEstateId',
      params: {
        estateId: estateId, //楼盘ID
        pageNum: 1, //显示第几页
        pageSize: 5, //一页显示多少条
      },
    })
    if (ByEstateId.code == 200) {
      HouseDynamicList = ByEstateId.data.list
      total_code = ByEstateId.data.total
    }

    // 楼盘户型
    var RoomList = await u.http({
      url: '/pc/houseRoom/queryHouseRoomList',
      params: {
        estateId: estateId, //楼盘ID
      },
    })
    if (RoomList.code == 200) {
      HouseRoomList = RoomList.data
      HouseRoomList.forEach((item) => {
        item.roomList.forEach((ites) => {
          ites.urls = `/lpxqhxxq/${estateId}.html?roomId=${ites.roomId}`
          if (ites.tagNames == '' || ites.tagNames == null) {
            ites.tagCode = []
          } else {
            ites.tagCode = ites.tagNames.split(',')
          }
        })
      })
    }

    // 首页楼盘户型
    var queryHouse = await u.http({
      url: '/app/houseRoom/queryHouseRoomList',
      params: {
        estateId: estateId, //楼盘ID
        pageNum: 1, //显示第几页
        pageSize: 4, //一页显示多少条
        roomNum: '', //几室
      },
    })
    if (queryHouse.code == 200) {
      queryHouse.data.list.forEach((item) => {
        item.href = `/lpxqhxxq/${estateId}.html?roomId=${item.roomId}`
      })
      HouseRoomList_index = queryHouse.data.list
      queryHouse.data.list.forEach((item) => {
        if (item.tagNames == null || item.tagNames == '') {
          item.tagCode = []
        } else {
          item.tagCode = item.tagNames.split(',')
        }
      })
    }

    // 猜你喜欢
    var getYouLike = await u.http({
      url: '/app/houseInfo/queryHouseInfoListByHomePage',
      params: {
        cityCode,
        userId: '',
        pageSize: 5,
      },
    })
    if (getYouLike.code == 200) {
      HouseHomePage = getYouLike.data.homePageList.list
    }

    // 热门榜单
    var RankingList = await u.http({
      url: '/pc/ranking/queryRankingListBySize',
      params: {
        pageSize: 4,
        cityCode, //城市编码
        host: ctx.req.headers.host,
      },
    })
    if (RankingList.code == 200) {
      topList = RankingList.data
    }

    // 202111160911 sry 优惠活动显示数据
    var getqueryHouseActivityList = await u.http({
      url: '/app/houseActivity/queryHouseActivityList',
    })
    if (getqueryHouseActivityList.code == 200) {
      houseActivityList = getqueryHouseActivityList.data
    } else {
      activityVisible = false
    }
    // 202112081715 ary 楼盘问答
    var problem = await u.http({
      url: '/app/houseInfoQa/queryHouseQaList',
      params: {
        estateId: estateId, //楼盘ID
        type: 1,
        pageNum: 1,
        pageSize: 4,
      },
    })
    if (problem.code == 200) {
      problemList = problem.data.list
      problemList.forEach((item) => {
        item.urls = `/lpxqwdxq/${estateId}.html?id=${item.id}`
        var date = new Date(item.createdTime)
        var YY = date.getFullYear() + '-'
        var MM =
          (date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1) + '-'
        var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        var hh =
          (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
        var mm =
          (date.getMinutes() < 10
            ? '0' + date.getMinutes()
            : date.getMinutes()) + ':'
        var ss =
          date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return (item.datetime = YY + MM + DD + ' ' + hh + mm + ss)
      })
    }

    // 大盘问答配置
    var configure = await u.http({
      url: '/pc/qa/queryHouseQaListByDType',
      params: {
        estateId: estateId, //楼盘ID
        dType: 1,
      },
    })
    if (configure.code == 200) {
      configureList = configure.data
    }
    var popupproblem = {
      // 弹窗
      show: false,
      title: '有问必答',
      content: `对 ${HouseDetail.name} 的提问（必填）`,
      textareaValue: '',
      placeholder: '在这里输入您的问题（必填）',
      confirmText: '立即提问',
      disabled: false,
    }

    // 202112281642 ary 楼盘点评
    var comment = await u.http({
      url: '/app/houseInfoDP/queryHouseDPList',
      params: {
        estateId: estateId, //楼盘ID
        pageNum: 1,
        pageSize: 2,
      },
    })
    if (comment.code == 200) {
      commentList = comment.data.list
      commentList.forEach((item) => {
        var date = new Date(item.createdTime)
        var YY = date.getFullYear() + '-'
        var MM =
          (date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1) + '-'
        var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        var hh =
          (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
        var mm =
          (date.getMinutes() < 10
            ? '0' + date.getMinutes()
            : date.getMinutes()) + ':'
        var ss =
          date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return (item.datetime = YY + MM + DD + ' ' + hh + mm + ss)
      })
      var commentTotal = comment.data.total //楼盘点评数量
    }

    // 获取房价走势
    var HousePrice = await u.http({
      url: '/pc/price/queryHousePriceByEstateId',
      params: {
        estateId: estateId, //楼盘ID
      },
    })
    if (HousePrice.code == 200) {
      var newData = []
      var estateData = HousePrice.data.housePriceList
      estateDataName = estateData.length > 0 ? estateData[0].houseName : ''
      estateData.forEach((item) => {
        estateDataList.push(parseInt(item.meterPrice))
      })
      var cityData = HousePrice.data.cityPriceList
      cityDataName = cityData.length > 0 ? cityData[0].cityName : ''
      cityData.forEach((item) => {
        cityDataList.push(parseInt(item.avgMeterPrice))
        newData.push(item.years)
      })
      var regionData = HousePrice.data.regionPriceList
      regionDataName = regionData.length > 0 ? regionData[0].regionName : ''
      regionData.forEach((item) => {
        regionDataList.push(parseInt(item.avgMeterPrice))
      })

      if (
        estateData.length > cityData.length &&
        estateData.length > regionData.length
      ) {
        newData = estateData.map((x) => x.years)
      }
      if (
        regionData.length > estateData.length &&
        regionData.length > cityData.length
      ) {
        newData = regionData.map((x) => x.years)
      }
    }

    return {
      prefixUrl,
      imageUrl, //二维码扫码登陆
      cityCode,
      crumbListData,
      currentCity,
      cityList,
      HouseDetail,
      HouseImgList, //
      swiperData, //相册
      AbbreviationImg, //缩略图片集
      HouseDynamicList,
      HouseRoomList,
      HouseRoomList_index,
      HouseHomePage,
      topList,
      total_code,
      estateId,
      rankingType, //人气榜单
      tabName,
      tabList,
      centerBaiDu, //地图
      zoom, //缩放
      AbbreviationImgClass,
      XiangceHref, //首页图片跳转相册页面
      ToDiTuAllCode, //首页地图跳转
      ToHUxingAllCode,
      dynamicAllCode,
      houseActivityList,
      activityVisible,
      problemList,
      popupproblem,
      commentTotal,
      commentList,
      configureList,
      //房价走势
      estateData,
      estateDataName,
      cityDataName,
      regionDataName,
      estateDataList,
      cityDataList,
      regionDataList,
      cityData,
      regionData,
      newData,
      regionList: ctx.regionList,
      splitPageUrlArr: ctx.splitPageUrlArr,
    }
  },
  mounted() {
    this.Bmap_sreach()
    // 免费预约看房专车
    this.phone = localStorage.getItem('userInfo')
      ? JSON.parse(localStorage.getItem('userInfo')).mobile
      : ''
    this.userInfo = localStorage.getItem('userInfo')
      ? JSON.parse(localStorage.getItem('userInfo'))
      : ''
    // qr二维码
    this.qrCodeType()
    this.mySwiper1 = new Swiper('#sc1', {
      loop: true,
      // 如果需要前进后退按钮
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    })
    this.setEcharts()
  },
  methods: {
    // 设置房价走势图标
    setEcharts() {
      // 图表
      var myChart = echarts.init(document.getElementById('lineAxis'))
      var option
      option = {
        tooltip: {
          trigger: 'axis',
        },
        toolbox: {
          feature: {},
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: this.newData,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 元',
          },
        },
        series: [
          {
            name: this.cityDataName,
            type: 'line',
            data: this.cityDataList,
          },
          {
            name: this.regionDataName,
            type: 'line',
            data: this.regionDataList,
          },
          {
            name: this.estateDataName,
            type: 'line',
            data: this.estateDataList,
          },
        ],
      }
      option && myChart.setOption(option)
    },
    // 获取更多资讯
    getMoreInfo() {
      u.http({
        client: true,
        url: '/app/houseDynamic/queryHouseDynamicByEstateId',
        headers: {
          token: localStorage.getItem('token') || '',
        },
        params: {
          estateId: this.estateId, //楼盘ID
          pageNum: 1, //显示第几页
          pageSize: 30, //一页显示多少条
        },
      }).then((res) => {
        if (res.code == 200) {
          this.HouseDynamicList = res.data.list
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
      })
    },
    // 切换周边配套栏目
    handleSelect(index, name) {
      this.peitaoTabIndex = index
      this.MapDetection_Code = name
      this.addressData = this.MapDetection_Code !== '公交' ? '地址' : '车次'
      this.Bmap_sreach()
    },
    // 周边配套列表选择
    getPoint(pointList) {
      var point = new BMapGL.Point(pointList.point.lng, pointList.point.lat)
      this.map.setCenter(point)
      var opts = {
        title: pointList.title, // 信息窗口标题
      }
      var infoWindow = new BMapGL.InfoWindow(
        `${this.addressData}:${pointList.address}`,
        opts
      ) // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point) //开启信息窗口
    },
    // 百度地图APi
    Bmap_sreach(pointList) {
      this.map = new BMapGL.Map(this.container_peitao_list) // 创建Map实例
      var mPoint = new BMapGL.Point(this.centerBaiDu.lng, this.centerBaiDu.lat)

      this.map.centerAndZoom(mPoint, this.zoom)
      this.map.disableDoubleClickZoom() //禁止缩放
      this.map.enableDoubleClickZoom() //启用双击放大，默认启用
      this.map.addControl(new BMapGL.NavigationControl()) //平移缩放控件
      this.container_peitao_list = 'container'

      var _this = this

      if (pointList) {
        var pointTitle = pointList.title
        var pointLng = pointList.point.lng
        var pointLat = pointList.point.lat
      }

      //  添加自定义图标
      var opts = {
        position: new BMapGL.Point(this.centerBaiDu.lng, this.centerBaiDu.lat), // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(-50, -60), // 设置文本偏移量
      }
      var options = {
        renderOptions: { map: this.map },
        onSearchComplete: function (results) {
          _this.resultsList = []
          _this.resultsList = results._pois
        },
      }

      var pointCode = {
        position: new BMapGL.Point(pointLng, pointLat), // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(-50, -60), // 设置文本偏移量
      }

      // 创建文本标注对象
      var label = new BMapGL.Label(this.HouseDetail.name, opts)
      var local = new BMapGL.LocalSearch(this.map, options)
      // 自定义文本标注样式
      label.setStyle({
        height: '40px',
        background: '#ff9800',
        borderRadius: '4px',
        textAlign: 'center',
        lineHeight: '40px',
        border: 'none',
        color: '#FFFFFF',
        fontSize: '14px',
        padding: '0 20px',
      })

      this.map.addOverlay(label)

      local.searchInBounds(this.MapDetection_Code, this.map.getBounds(), 2000)
    },
    // ==================相册缩略图active=====================
    AbbrImgList(type, index) {
      this.AbbreviationImgClass = type
      this.mySwiper1.slideTo(index)
    },
    // ==============跳转页面=================
    jump(url) {
      location.href = url
    },
    // =========户型数据显示隐藏============
    HouseRoomListChange(e) {
      this.HouseRoomList.forEach((itemDs, indexDs) => {
        if (itemDs.roomNumName == e) {
          this.HouseRoomListIndex = indexDs
        }
      })
    },
    // =================预约免费专车看房=============================
    // 动态二维码拨打电话
    qrCodeType() {
      let canvas = document.getElementById('canvas')
      let url = `https://xfadmin.mfgjw.com/wxminiapp/?id=${this.estateId}`
      var qrcode = QRCode.toCanvas(
        canvas,
        url,
        { margin: 1, width: 117, height: 117 },
        (error) => {
          if (error) console.error(error)
        }
      )
    },
    // 预约免费专车看房
    subscribe() {
      if (this.houseViewingDate == '') {
        this.$message({
          message: '请选择看房时间',
          type: 'warning',
        })
        return false
      }
      if (this.phone == '') {
        this.$message({
          message: '请输入您的手机号',
          type: 'warning',
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '请输入正确手机号',
          type: 'warning',
        })
        return false
      }
      this.subscribeCar()
    },
    // 预约专车
    subscribeCar() {
      this.subscribeDisabled = true
      u.http({
        client: true,
        url: '/app/amentOrder/createAmentOrder',
        headers: {
          token: localStorage.getItem('token') || '',
        },
        params: {
          type: 1,
          amentCall: this.sexRadio,
          phone: localStorage.getItem('userInfo')
            ? JSON.parse(localStorage.getItem('userInfo')).mobile
            : this.phone,
          amentTime: this.houseViewingDate,
          amentHouseName: '',
        },
      }).then((res) => {
        if (res.code == 200) {
          // this.SubscriptionSuessTipe = true;
          this.houseViewingDate = ''
          setTimeout((e) => {
            this.subscribeDisabled = false
          }, 1000)
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          this.subscribeDisabled = false
        }
      })
    },
    // ==========================订阅回访消息==================================
    // 预约
    subscribe(
      title,
      desc,
      cover,
      titleend,
      customTheme,
      background,
      contentClass,
      url
    ) {
      this.popupform.show = true
      this.popupform.title = title
      this.popupform.cover = cover
      this.popupform.smsState = this.smsState
      this.popupform.desc = desc
      if (localStorage.getItem('mobile')) {
        this.popupform.phone = Number(localStorage.getItem('mobile'))
      }
      this.popupsubscribe.title = titleend
      this.popupform.customTheme = customTheme ? Number(customTheme) : 0 //是否为背景验证
      this.popupform.background = background //背景验证背景图
      this.popupform.contentClass = contentClass //活动背景图class样式
      this.popupform.url = url
    },
    // 登录成功回调
    returnVisit() {
      this.popupform.show = false
      this.subscribeDisabled = true
      let url = getCookie('token')
        ? '/app/visitRecord/addVisitRecord'
        : '/app/visitRecord/addVisitRecordByNoToken'
      u.http({
        client: true,
        url,
        headers: {
          token: getCookie('token') || '',
        },
        params: {
          clickType: this.clickType,
          phone: this.popupform.phone,
          estateId: this.estateId,
        },
      }).then((res) => {
        if (this.popupform.url) {
          location.href = this.popupform.url
          return false
        }
        this.popupsubscribe.show = true
      })
    },
    // 监听手机号
    phoneChange(e) {
      this.popupform.phone = e
    },
    // 楼盘问答弹窗
    getListData() {
      this.moreDisabled = true
      let labs =
        this.labsChecked == '' && this.labsChecked == 'lpzx'
          ? ''
          : this.labsData[this.labsIndex].content
      let type =
        this.labsChecked == '' ? '' : this.labsChecked == 'lpzx' ? 1 : 2
      u.http({
        client: true,
        url: '/app/houseInfoQa/queryHouseQaList',
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          labs,
          type, // 1代表楼盘2代表楼市
          estateId: '',
          qaName: this.qaName,
          cityCode: this.cityCode,
        },
      }).then((res) => {
        if (res.code == 200) {
          res.data.list.forEach((item) => {
            item.labsArr = item.labs ? item.labs.split(',') : []
          })
          this.listData = [...this.listData, ...res.data.list]
          setTimeout((e) => {
            this.moreDisabled = false
          }, 500)
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
      })
      setTimeout((e) => {
        this.moreDisabled = false
      }, 500)
    },
    // 立即提问
    popupproblemConfirm(e) {
      this.textareaValue = e
      var nowE = e.replace(new RegExp(/\s/, 'g'), '')
      if (nowE == '') {
        this.$message({
          message: '请输入您的问题内容',
          type: 'warning',
        })
        return false
      }
      if (!localStorage.getItem('userInfo')) {
        setTimeout((e) => {
          document.querySelector('#login').click()
        }, 300)
        return false
      }
      this.save()
    },
    // 提交信息
    save() {
      this.popupproblem.disabled = true
      this.popupproblem.show = false
      u.http({
        client: true,
        url: '/app/houseInfoQa/addHouseInfoQa',
        headers: {
          token: localStorage.getItem('token') || '',
        },
        params: {
          type: 2,
          estateId: this.estateId,
          content: this.textareaValue,
          cityCode: this.cityCode,
        },
      }).then((res) => {
        this.popupproblem.textareaValue = ''
        if (res.code == 200) {
          setTimeout((e) => {
            this.popup.show = true
          }, 300)
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
      })
    },
  },
}
</script>